@import '~tracim_frontend_lib/src/css/Variable.styl'

tabWidth = 170 // 170px

.tabBar
  display flex
  background-color offWhite
  &__tabs
    display flex
    flex-basis content
  & .pageTitleGeneric
    flex 1
    min-width 0
    &__title__label
      font-weight bold
  // INFO - GB - 2020-12-09 - The style below means that for 4 items the label "Home"
  // will be hidden in the breadcrumbs
  .breadcrumbs__item
    &:first-child
      overflow visible
      &:nth-last-child(n + 4)
        .breadcrumbs__item__home
          display none

.tab
  width (tabWidth)px
  display flex
  align-items center
  justify-content center
  padding 5px standardSpacing
  color fontColor
  &__active
    padding-top 0px
    border-top-width 5px
    border-top-style solid
    border-bottom 1px solid transparent
    background-color lightGrey2
  .fas, .far
    margin-inline-end textSpacing
  // INFO - GB - 2020-11-20 - The style below should be specific to tachometer-alt icon.
  // See https://github.com/tracim/tracim/issues/3863
  .fa-tachometer-alt
    margin-bottom 1px
  &:hover
    color fontColor
    background-color lightGrey2

@media (max-width: max-md)
  tabWidth = 50
  .tab
    width (tabWidth)px
    & .fas, .far
      margin 0
    &__label
      display none
  .tabBar
    .breadcrumbs
      display none

@media (max-width: max-xs)
  .tabBar
    .pageTitleGeneric__title__icon
      display none
